<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/common.css" />
		<link rel="stylesheet" type="text/css" href="css/public.css" />
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<style type="text/css">
			#cake_type1{
				animation: cake_type1 3s linear -1s backwards;
				-webkit-animation: cake_type1 3s linear -1s backwards;
			}
			@keyframes cake_type1{
				0%{
					transform: translateX(-60px);
					opacity: 0;
				}
				50%{
					transform: translateX(-30px);
					opacity: 0.5;
				}
				100%{
					transform: translateX(0px);
					opacity: 1;
				}
			}
			#cake_type2{
				animation: cake_type3 3s linear -1s backwards;
				-webkit-animation: cake_type2 3s linear -1s backwards;
			}
			@keyframes cake_type2{
				0%{
					transform: translateY(60px);
					opacity: 0;
				}
				50%{
					transform: translateY(30px);
					opacity: 0.5;
				}
				100%{
					transform: translateY(0px);
					opacity: 1;
				}
			}
			#cake_type3{
				animation: cake_type3 3s linear -1s backwards;
				-webkit-animation: cake_type3 3s linear -1s backwards;
			}
			@keyframes cake_type3{
				0%{
					transform: translateX(60px);
					opacity: 0;
				}
				50%{
					transform: translateX(30px);
					opacity: 0.5;
				}
				100%{
					transform: translateX(0px);
					opacity: 1;
				}
			}
		</style>
		<script src="js/jquery-3.6.0.min.js"></script>
		<script type="text/javascript">
			$(function(){
			       $.ajax({ url:"header_new.html", context: document.body, success: function(sView){
			           $(".xf_header").append($(sView));
			        }});
			       $.ajax({ url:'footer_new.html', context: document.body, success: function(sView)       {
			            $(".xf_footer").append($(sView));
			        }});
			    })
		</script>
	</head>
	<body>
		<!--
			页面的版心宽度  1251px
		-->
		<div id="box">
			<!--头部-->
			<div class="xf_header">
				
			</div>
			<!--头部 end-->

			<!--广告 -->
			<div class="banner">
				<a href="detail.html">
					<img src="img/bg.jpg" id="bgImg"/>
				</a>
			</div>
			<!--广告 end-->

			<!-- 商品分类 -->
			<div class="cake_type">
				<div id="cake_type1">
					<a>
						<img src="img/cake_03.jpg" />
					</a>
					<a>
						<span>AFTERNOON TEA </span>
						<span>下午茶</span>
					</a>
					<p>“一杯咖啡，一份甜点，一抹偷不走的时光”</p>
				</div>
				<div id="cake_type2">
					<a href="list.html">
						<img src="img/cake_05.jpg" />
					</a>
					<a href="list.html">
						<span>CAKE </span>
						<span>蛋糕</span>
					</a>
					<p>“只有国王才有资格拥有的，享受众人给予的祝福”</p>
				</div>
				<div id="cake_type3">
					<a>
						<img src="img/cake_07.jpg" />
					</a>
					<a>
						<span>SOUVENIR </span>
						<span>手信</span>
					</a>
					<p>“不在于贵，一情意，一真诚”</p>
				</div>
			</div>
			<!-- 商品分类 end -->

			<!--底部 -->
			<div class="xf_footer">
				
			</div>
			<!--底部 end-->
		</div>
	</body>
</html>
